<template>
    <vab-card>
        <template #header>
          <span class="leve2_title">基础信息</span>
        </template>
        <template #default>
          <el-form
            v-loading="baseLoading"
            :ref="(el) => (baseFormRef = el)"
            :model="baseForm"
            label-width="90px"
            class="form_search"
          >
            <el-row :gutter="24">
              <el-col v-for="(item, i) in _CreateBaseForm" 
                :key="i" :xs="24" :sm="12" :md="12" :lg="8" :xl="8" 
              >
                <!-- 默认项 -->
                <el-form-item
                  v-if="item.type == 'select'"
                  :label="item.label"
                  :prop="item.prop"
                  :rules="[
                    { required: true, message: `${item.label}不能为空！`, trigger: 'blur' },
                  ]"
                > 
                  <el-select 
                    clearable
                    filterable
                    class="width_100" 
                    placeholder="请选择"
                    v-model="baseForm[item.prop]" 
                    :multiple="item.multiple"
                    :disabled="item.disabled"
                    @change="() => {
                      handleChange(item.prop, baseForm[item.prop])
                    }"
                    @focus="() => {
                      handleFocus(item.prop, baseForm[item.prop])
                    }"
                  >
                    <el-option
                      v-for="(jtem, i) in selectOptions(item.prop)"
                      :key="jtem.value"
                      :label="jtem.label"
                      :value="jtem.value"
                    />
                  </el-select>
                </el-form-item>
                 <!-- radio -->
                 <el-form-item
                  v-if="item.type == 'radio'"
                  :label="item.label"
                  :prop="item.prop"
                  :rules="[
                    { required: true, message: `${item.label}不能为空！`, trigger: 'blur' },
                  ]"
                >
                    <el-radio-group :disabled="item.disabled" v-model="baseForm[item.prop]" >
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                </el-form-item>

                <!-- input -->
                <el-form-item
                  v-if="item.type == 'input'"
                  :label="item.label"
                  :prop="item.prop"
                  :rules="[
                    { required: true, message: `${item.label}不能为空！`, trigger: 'blur' },
                  ]"
                >
                  <VabInputForm :disabled="item.disabled" v-model.trim="baseForm[item.prop]" />
                </el-form-item>
                 <!-- text -->
                <el-form-item
                  v-if="item.type == 'text'"
                  :label="item.label"
                  :prop="item.prop"
                >
                  <el-input disabled v-model.trim="baseForm.number"/>
                </el-form-item>
                <!-- time -->
                <el-form-item
                  v-if="item.type == 'time'"
                  :label="item.label"
                  :prop="item.prop"
                  :rules="[
                    { required: true, message: `${item.label}不能为空！`, trigger: 'blur' },
                  ]"
                >
                  <VabTimeForm :disabled="item.disabled" v-model="baseForm[item.prop]" />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="16" :xl="16">
                <el-form-item
                  label="备注"
                  prop="remark"
                >
                  <VabInputForm v-model.trim="baseForm.remark" :type="'textarea'"/>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </template>
    </vab-card>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { CreateBaseForm, CreateBaseFormDisabled, PriceOutsideOptions } from './tools'

/**
 * @props 
 */
const props = defineProps({
  loading: {
    type: Boolean,
    default: false
  },
  fromPage: {
    type: String,
    default: 'create'
  },
  screenObj: {
    type: Object,
    default: null
  }
})


/**
 * @import
 */

/**
 * @var
 */
const baseFormRef = ref<any>(null)
let baseForm = ref<any>({
  is_included_tax: 1,
  currency_id: 1,
})

const sreachScreen = ref<any>(null)
const _CreateBaseForm = props.fromPage == 'update' ? CreateBaseFormDisabled : CreateBaseForm

const baseLoading = ref<boolean>(false)
/**
 * @method
 */

const emit = defineEmits(['useOrgChange', 'checkUseOrg'])

const handleChange = (prop: any, value: any) => {
  if (prop == 'use_org_id') {
    baseForm.value.customer_id = ''
    emit('useOrgChange', value)
  }
}
const handleFocus = (prop: any, value: any) => {
  if (prop == 'customer_id') emit('checkUseOrg')
}

// 获取筛选项
const getScreen = async (res: any) => {
  baseLoading.value = true
  sreachScreen.value = await res
  setTimeout(() => {
    baseLoading.value = false
  }, 500)
}

const selectOptions = (value: string) => {
  if (!sreachScreen.value) return
  if (!value) return
  return PriceOutsideOptions(sreachScreen.value, value)
}

// 获取更新数据
const getUpdateData = async (info: any) => {
  baseLoading.value = true

  info.expiration_date = [info.effective_date, info.expiry_date]
  baseForm.value = await info

  setTimeout(() => {
    baseLoading.value = false
  }, 1000)
}

/**
 * @实例
 */
defineExpose({
  baseFormRef,
  baseForm,
  getScreen,
  getUpdateData,
})
</script>

<style scoped lang="scss">
:deep() {
  .el-loading-spinner {
    display: none;
  }
}
</style>